import List, { ListItem } from "@/components/demo/List";
import type { DataType } from "csstype";
import styles from "./Elements.module.css";

const data: { name: string; color: DataType.Color }[] = [
  { name: "风", color: "aliceblue" },
  { name: "水", color: "skyblue" },
  { name: "火", color: "firebrick" },
  { name: "雷", color: "purple" },
  { name: "冰", color: "white" },
  { name: "草", color: "forestgreen" },
  { name: "岩", color: "rosybrown" },
];

export default function Elements() {
  return (
    <List style={{ color: "xx" }} class={styles.elements}>
      {data.map((it) => (
        <ListItem style={{ backgroundColor: it.color }} key={it.name}>
          {it.name}
        </ListItem>
      ))}
    </List>
  );
}
